<template>
  <div class="w-16 h-16 mr-4 text-center p-2">
    <img :src="callGrandparentMethod(day.day_text)" alt="正方形图片" class="w-full h-full object-cover rounded-full" />
    {{ day.day_text == '9999' ? '过去' : day.day_text }}
  </div>
  <div class="p-2 h-18">
    <p class="mt-4 text-xl font-semibold whitespace-nowrap">{{ callGrandparentMethod2(day.time) }}</p>
    <p class="mt-2 text-sm">{{ day.min_temp.toString().split('.')[0] }}~{{ day.max_temp.toString().split('.')[0] }}℃</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

defineProps({
  day: Object, // Define qweather as an object prop
});

// Inject the grandparentMethod from the grandparent component
const geticon = inject('geticon');

const convertDateFormat = inject('convertDateFormat');

// Define a method to call the grandparentMethod
const callGrandparentMethod = (text) => {
  if (geticon) {
    return geticon(text); // Call the grandparentMethod
  }
};
const callGrandparentMethod2 = (text) => {
  if (convertDateFormat) {
    return convertDateFormat(text); // Call the grandparentMethod
  }
};
</script>
<style scoped lang="less"></style>
